<template>
    <div class="logic-tree">
        <div v-for="(node) in props.nodes" :key="node.id" class="node-container">
            <div class="node" :class="node.dictLogicType != 'OR' && node.dictLogicType != 'AND'? 'nodeSelect':''" :ref="setNodeRef(node)">
                <div class="node-slot">
                    <div v-if="!node.dictLogicType" class="node-data">
                        <span class="inline-block m-r-xs">{{node.data.paramName}}</span>
                        <span class="inline-block m-r-xs" v-if="node.data.dictOperator">{{dictList.OPERATOR.map[node.data.dictOperator]}}</span>
                        <span class="inline-block m-r-xs" v-if="props.sign==1">
                            <span v-if="node.data.dictDataPermColumnType=='3'||node.data.dictDataPermColumnType=='4'||node.data.dictDataPermColumnType=='5' ||
                            node.data.dictDataPermColumnType=='3'||node.data.dictDataPermColumnType=='4'||node.data.dictDataPermColumnType=='5'">{{node.data.valueDesc}}</span>
                            <span v-else>{{node.data.value}}</span>
                        </span>
                        <span class="inline-block m-r-xs" v-if="props.sign==2">
                            {{node.data.valueDesc}}
                        </span>
                    </div>
                    <div v-if="node.dictLogicType === 'OR'" class="node-or"><el-check-tag checked type="danger">{{ node.data.name }}</el-check-tag></div>
                    <div v-if="node.dictLogicType === 'AND'" class="node-and"><el-check-tag checked type="success">{{ node.data.name }}</el-check-tag></div>
                </div>     
            </div>
            <LogicTree v-if="node.children && node.children.length > 0" :nodes="node.children" :sign="props.sign"/>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import LogicTree from './logicTreeRead.vue';
import { NodeRead } from './index.vue';
import type { Dict } from '@/api/pub/type.ts';

// 初始化节点数据
const props = defineProps<{ 
    nodes: NodeRead[];
    sign: number;
}>();
// 创建一个函数来设置 ref
const setNodeRef = (node: NodeRead) => {
    return (el: any) => {
        node.nodeRef = el;
    };
};
const dictOperatorList = ref<Dict[]>([]);
const dictList = autoDict();
onMounted(() => {
    init();
})
const init = () => {
    dictOperatorList.value = dictList.OPERATOR?.list;
}
</script>
  
<style scoped lang="scss">
.logic-tree {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10px; 
    .node-container {
        display: flex;
        align-items: center;
        gap: 28px;
    }
    .node {
        display: flex;
        align-items: center;    
        position: relative;
        height: 28px;
        justify-content: center;
        padding: 0 10px;
        .node-slot{
            height: 28px;
            line-height: 28px;        
            white-space: nowrap;        
            .node-data{
                height: 28px;
                line-height: 28px;
                display: flex;
                align-items: center;
            }
        }
    }
    .nodeSelect:hover {
        border-radius: 4px;
        background-color: var(--el-fill-color);
        z-index: 1;
        cursor: pointer;
    }   
}
</style>
